import { Link, Route, Switch, NavLink, Redirect } from 'react-router-dom'
import { BrowserRouter } from 'react-router-dom'
import { useState } from 'react'
import qs from 'querystring'


/**
 * 路由传参
 */


function Home(props) {
  let [data] = useState([
    {id: 1, title: '新闻'},
    {id: 2, title: '财经'},
    {id: 3, title: '体育'},
    {id: 4, title: '文化'},
  ])
  return (<div>
    <ul>
      {/* params传参 /home/:id/:title */}
      {/* {
        data.map(item => <Link key={item.id} to={`${props.match.path}/total/${item.id}/${item.title}`} >{item.title}</Link>)
      } */}
      {/* query传参 /home?id=1&title=weibo */}
      {/* {
        data.map(item => <Link key={item.id} to={`${props.match.path}/total?id=${item.id}&title=${item.title}`} >{item.title}</Link>)
      } */}
      {/* state参数 */}
      {
        data.map(item => <Link key={item.id} to={{pathname: `${props.match.path}/total`, state: {id: item.id, title: item.title} }} >{item.title}</Link>)
      }
      <Route path={`${props.match.path}/total`} component={Total}></Route>
    </ul>
  </div>)
}

// 子组件
function Total(props) {
  console.log(props)
  // params取值
  // let {id, title} = props.match.params
  // query取值
  // let queryStr = props.location.search
  // let queryObj = qs.parse(queryStr.slice(1))
  // console.log(queryObj)
  // state参数取值
  let stateObj = props.location.state
  console.log(stateObj)

  return (
    <div>total</div>
  )
}


function App() {
  return (
    <div className="App">
      <BrowserRouter>
        {/* 内联样式 */}
        <div>
          <NavLink activeStyle={{color: 'blue'}} to="/home">Home</NavLink>
        </div>
        {/* 一个switch为一组，只会展示第一个被匹配的组件 */}
        <Switch>
          <Route component={Home} path="/home"></Route>
        </Switch>
        
      </BrowserRouter>
    </div>
  )
}

export default App
